<template>
  <div v-if="is_admin_view == 0 && is_admin == 0 ">
    <div class="service">
        <div class="service_flex">
          <div @click="show(item)" :class="index == item.id ? 'active':'' " class="item" v-for="item in list" :key="item.id">
            <p><i  :class="index == item.id ? `ActiveIconfont ${item.icon}`:item.icon"></i></p>
            <p class="title" :class="index == item.id ? 'ActiveIconfont':'' ">{{item.name}}</p>
          </div>
        </div>
    </div>
    <el-dialog
     :close-on-click-modal='false'
      :title="title"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">
      <el-input
        type="textarea"
        :rows="2"
        resize="none"
        :placeholder="plad"
        v-model="textarea">
      </el-input>
      <div class="dialog-footer">
        <span slot="footer" >
          <el-button class="pubBtn2" @click="dialogVisible = false">取 消</el-button>
          <el-button class="pubBtn" @click="submit">提 交</el-button>
        </span>
        <div class="introduce">
          <div class="ewm">
            <p>微信二维码</p>
            <img  src="../../../public/ewm.png">
          </div>
          <div>
            <p class="context">电话：李先生 13836945698</p>
            <p class="context">邮箱：13836945698@163.com</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {indexCreate} from '@/api'
  export default{
    computed: {
      ...mapGetters([
        'sidebar',
        'avatar',
        'name',
        'roles',
        'type',
        'is_admin_view',
        'is_admin'
      ]),
      // ...mapState(['seach'])
    },
    data(){
      return{
        title:'',
        textarea:'',
        plad:'',
        dialogVisible:false,
        list:[
          {
            id:1,
            name:'专利保险',
            icon:"iconfont icon-zhuanlibaoxian"
          },
          {
            id:2,
            name:'职称考试',
            icon:"iconfont icon-zhuanlidaili-01"
          },
          {
            id:3,
            name:'产学合作',
            icon:"iconfont icon-kefuzixun"
          },
          {
            id:4,
            name:'政策咨询',
            icon:"iconfont icon-kefuzixun"
          },
          {
            id:5,
            name:'返回首页',
            icon:"iconfont icon-fanhuishouye"
          },
        ],
        index:null,
      }
    },
    methods:{
      show(item){
        this.index = item.id
        if(item.id === 1 ){
          this.title = item.name
          this.plad = '请填写您想咨询的专利保险内容'
          this.dialogVisible = true
        } else if(item.id === 3){
          this.title = item.name
          this.plad = '请填写您想咨询的政策咨询内容'
          this.dialogVisible = true
        }else if(item.id === 2){
          this.title = item.name
          this.plad = '请填写您想咨询的职称考试内容'
          this.dialogVisible = true
        }else if(item.id === 4){
          this.title = item.name
          this.plad = '请填写您想咨询的产学合作内容'
          this.dialogVisible = true
        }else{
          if(this.$route.path == '/home'){
            location.reload()
          }else{
            this.$router.push('/')
          }
        }
      },
      handleClose(){
        this.dialogVisible = false;
        this.textarea = '';
        this.index = ''
      },
      async submit(){
        try{
          await indexCreate({
            cid:this.index,
            content:this.textarea,
            // pns:this.itemList.pns,
            // tic:this.itemList.tic,
            // pid:this.itemList.pid,
            // type:this.part
          })
          this.dialogVisible = false;
          this.textarea = '';
          this.index = ''
          this.$message.success('提交成功，请等待工作人员与您联系')
        } catch (e){
          this.$message.error(e.message)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .service{
    position: fixed;
    right:0;
    top: 40%;
    transform: translateY(-40%);
    width: 67px;
    background: #FFFFFF;
    box-shadow: 0px 3px 7px 0px rgba(102, 102, 102, 0.44);
    border-radius: 4px;
    z-index:3;
    .service_flex{
      text-align: center;
      display: flex;
      justify-content:center;
      align-items: center;
      align-content: center;
      flex-direction: column;
      .item{
        text-align: center;
        width: 58px;
        height: 54px;
        border-radius: 4px;
        margin:10px 0;
        cursor: pointer;
        &:hover{
          color: #fff;
          background: #3377FF;
        }
      }
      .iconfont{
        font-size:26px;
        color:inherit;
        &:hover{
          color:inherit;
        }
      }
      .title{
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        margin-top:5px;
        &:hover{
          color:inherit;
        }
      }
    }

  }
  .active{
    background: #3377FF;
  }
  .ActiveIconfont{
    color:#fff !important;
  }
  .dialog-footer{
    text-align: left;
    margin-top:20px;
  }
  .introduce{
    display: flex;
    align-items:flex-end;
    margin-top:30px;
    .context{
      color: #3478FF;
    }
    .ewm{
      width:95px;
      height:95px;
      object-fit: cover;
      margin-right:10px;
      img{
        width: 100%;
        width: 100%;
      }
    }
  }

  @media (max-width:1440px) {
    .service{
      top:50%;
    }
  }
</style>
